'use client'
import React from 'react';
import { EditorContent, useEditor } from '@tiptap/react';
import { StarterKit } from '@tiptap/starter-kit';
import { Image } from '@tiptap/extension-image';
import { Link } from '@tiptap/extension-link';
import { Table } from '@tiptap/extension-table';
import { TableRow } from '@tiptap/extension-table-row';
import { TableCell } from '@tiptap/extension-table-cell';
import { TableHeader } from '@tiptap/extension-table-header';
import { Underline } from '@tiptap/extension-underline';
import { CodeBlock } from '@tiptap/extension-code-block';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import {
  Bold,
  Italic,
  Underline as UnderlineIcon,
  Code,
  List,
  ListOrdered,
  Blocks as BlockquoteIcon,
  Image as ImageIcon,
  Link2,
  Table as TableIcon,
  Table2,
  SquarePlus as PlusSquare,
  SquareMinus as MinusSquare
} from 'lucide-react';

interface TiptapEditorProps {
  value: string;
  onChange: (html: string) => void;
  disabled?: boolean;
}

export const TiptapEditor: React.FC<TiptapEditorProps> = ({ value, onChange, disabled = false }) => {
  const editor = useEditor({
      extensions: [
        StarterKit,
        Image,
        Link,
        Table,
        TableRow,
        TableCell,
        TableHeader,
        Underline,
        CodeBlock
      ],
      content: value || '<p></p>',
      editable: !disabled,
      immediatelyRender: false,
      onUpdate: ({ editor }) => {
        onChange(editor.getHTML());
      },
    });

  if (!editor) {
    return null;
  }

  return (
    <div className="w-full border rounded-lg overflow-hidden">
      {/* 工具栏 */}
      <div className="flex flex-wrap gap-1 p-2 border-b bg-gray-50">
        <EditorButton
          onClick={() => editor.chain().focus().toggleBold().run()}
          active={editor.isActive('bold')}
          icon={<Bold size={16} />}
          tooltip="加粗"
        />
        <EditorButton
          onClick={() => editor.chain().focus().toggleItalic().run()}
          active={editor.isActive('italic')}
          icon={<Italic size={16} />}
          tooltip="斜体"
        />
        <EditorButton
          onClick={() => editor.chain().focus().toggleUnderline().run()}
          active={editor.isActive('underline')}
          icon={<UnderlineIcon size={16} />}
          tooltip="下划线"
        />
        <EditorButton
          onClick={() => editor.chain().focus().toggleCode().run()}
          active={editor.isActive('code')}
          icon={<Code size={16} />}
          tooltip="行内代码"
        />
        <Separator orientation="vertical" className="mx-1 h-6" />
        <EditorButton
          onClick={() => editor.chain().focus().toggleBulletList().run()}
          active={editor.isActive('bulletList')}
          icon={<List size={16} />}
          tooltip="无序列表"
        />
        <EditorButton
          onClick={() => editor.chain().focus().toggleOrderedList().run()}
          active={editor.isActive('orderedList')}
          icon={<ListOrdered size={16} />}
          tooltip="有序列表"
        />
        <EditorButton
          onClick={() => editor.chain().focus().toggleBlockquote().run()}
          active={editor.isActive('blockquote')}
          icon={<BlockquoteIcon size={16} />}
          tooltip="引用"
        />
        <EditorButton
          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
          active={editor.isActive('codeBlock')}
          icon={<Code size={16} />}
          tooltip="代码块"
        />
        <Separator orientation="vertical" className="mx-1 h-6" />
        <EditorButton
          onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
          icon={<TableIcon size={16} />}
          tooltip="插入表格"
        />
        <EditorButton
          onClick={() => editor.chain().focus().addRowBefore().run()}
          icon={<PlusSquare size={16} />}
          tooltip="上方插入行"
        />
        <EditorButton
          onClick={() => editor.chain().focus().deleteRow().run()}
          icon={<MinusSquare size={16} />}
          tooltip="删除行"
        />
        <Separator orientation="vertical" className="mx-1 h-6" />
        <EditorButton
          onClick={() => {
            const url = prompt('请输入图片URL:');
            if (url) {
              editor.chain().focus().setImage({ src: url }).run();
            }
          }}
          icon={<ImageIcon size={16} />}
          tooltip="插入图片"
        />
        <EditorButton
          onClick={() => {
            const url = prompt('请输入链接URL:');
            if (url) {
              editor.chain().focus().setLink({ href: url }).run();
            }
          }}
          icon={<Link2 size={16} />}
          tooltip="插入链接"
        />

      </div>
      {/* 编辑器内容 */}
      <div className="p-4 min-h-[300px] bg-white">
        <EditorContent editor={editor} />
      </div>
    </div>
  );
};

interface EditorButtonProps {
  onClick: () => void;
  active?: boolean;
  icon: React.ReactNode;
  tooltip?: string;
}

const EditorButton: React.FC<EditorButtonProps> = ({ onClick, active, icon, tooltip }) => {
  return (
    <Button
      type="button"
      variant="ghost"
      size="icon"
      onClick={onClick}
      className={`h-8 w-8 ${active ? 'bg-primary/10 text-primary' : 'hover:bg-gray-100'}`}
      title={tooltip}
    >
      {icon}
    </Button>
  );
};

export default TiptapEditor;